Remote Camera Streaming for Wireless CNC Control #743
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…era service initialization, settings management, and UI integration for remote clients. Add entitlements for macOS builds and update package configuration.
- Fix missing displayWebGLErrorMessage function in Visualizer component - Added method to handle WebGL errors with user-friendly toast notifications - Updated function calls to use 'this.' prefix correctly - Fix Select component empty value error in Camera settings - Removed SelectItem with empty string value that caused crashes - Placeholder now properly handled by SelectValue component - Fix transparent dropdown backgrounds in Camera settings - Added explicit background colors to all SelectContent components - Ensures proper contrast in both light and dark modes These fixes resolve the white screen crash when opening camera settings and improve the overall user experience with visible, readable dropdowns.
- Updated main client identification to use `isElectron` for better accuracy in distinguishing between local and remote clients. - Changed URL construction in Electron to always use `localhost` for secure camera access. - Enhanced connection logic in `RemoteCameraPanel` to ensure proper handling of peer connections and viewer disconnections. - Added new event handling for viewer disconnects to clean up peer connections efficiently. - Improved camera status checks and polling mechanisms in `ConditionalRemoteCameraPanel` to ensure timely updates on camera availability.
…ated camera panel logic
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds camera streaming from the main gSender client to remote browser clients, enabling users to monitor their CNC machine remotely when using Wireless CNC Control mode.
While gSender supports remote access via browser, I had no way to visually monitor my machine. This feature fills that gap by streaming the main client's camera feed to remote viewers.
Technical Implementation
Architecture:
/api/camera/status) for camera availability pollingClient-Side (React/TypeScript):
CameraService(singleton): Manages MediaDevices API, camera lifecycle, and RTCPeerConnection creationCameracomponent: Main client UI with device selection, resolution/framerate controls (720p/1080p, 15/30 FPS)RemoteCameraPanel: Remote client viewer that receives WebRTC stream via Socket.io signalingConditionalRemoteCameraPanel: Auto-detects remote client mode and polls for camera availabilityServer-Side (Node.js):
CameraSignalingservice: Routes WebRTC signaling messages between main and remote clientsapi.camera.js: REST endpoints for status checks with IP-based authorizationKey Technical Details:
RTCPeerConnection.addTrack()pc.ontrackevent handlerUI Integration:
Security
Testing Notes